<template>
  <div class="detail">
    <div class="detail-content">
      <p style="color: black;font-size:0.5rem">{{ list.title }}</p>
      <p style="font-size:0.5rem">共{{ list.total_periods }}课时 | {{ list.sales_num }}人已报名</p>
      <p style="font-size: 14px">
        开课时间 ： {{ list.start_play_date | formatDate }} -
        {{ list.end_play_date | formatDate }}
      </p>
      <p style="color: red">{{ list.sale_type ? "收费" : "免费" }}</p>
    </div>
    <div class="detail-teacher">
      <p>教学团队</p>
      <van-grid :column-num="3" center>
        <van-grid-item
          v-for="(item, index) in teacher"
          :key="index"
          :icon="item.avatar"
          :text="item.teacher_name"
          icon-size="50"
        />
      </van-grid>
    </div>
    <van-tabs v-model="active" scrollspy sticky>
      <van-tab title="课程介绍">
        <div class="dv">
          课程介绍
          <p v-html="list.course_details"></p>
        </div>
      </van-tab>
      <van-tab title="课程大纲">
        <div class="dv">
          课程大纲
          <p v-html="list.course_details"></p>
        </div>
      </van-tab>
      <van-tab title="课程评价">
        <div class="pingjia">
          课程评价
          <div v-for="item in courseComment" :key="item.id" class="pjlist">
            <img :src="item.avatar" />
            <div class="nr1">
              <div class="nrt">
                <span
                  >{{ item.nickname }}
                  <van-rate
                    v-model="item.grade"
                    :size="13"
                    color="#ffd21e"
                    void-icon="star"
                    void-color="#eee"
                    readonly
                  />
                </span>
                <p
                  style="
                    font-size: 3.73333vw;
                    font-weight: 400;
                    color: #333;
                    text-align: right;
                  "
                  >{{ item.created_at | formatDate }}</p
                >
              </div>
              <div style=" padding-left: 2.66667vw;">{{ item.content }}</div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="btm"></div>
  </div>
</template>
<script>
export default {
  filters: {
    formatDate: function (val) {
      let d1 = Number(val) * 1000;
      let date = new Date(d1);
      //注意对方给你的是毫秒还是秒，如果是毫秒需要转秒（*1000）
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      // let s = date.getSeconds();
      // s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m;
    },
  },
  data() {
    return {
      active: 0,
      list: [],
      teacher: [],
      courseComment: [],
    };
  },
  mounted() {
    // this.getcourse()
    this.getcourseDetail();
    this.getcourseComment();
  },
  methods: {
    getcourseDetail() {
      let params = this.$route.query.id;
      this.$API.getcourseInfo(params).then((res) => {
        console.log(res);
        this.list = res.data.data.info;
        this.teacher = res.data.data.teachers;
      });
    },
    getcourseComment() {
      let params = {
        id: this.$route.query.id,
        limit: 10,
        page: 1,
      };
      this.$API.courseComment(params).then((res) => {
        console.log(res);
        this.courseComment = res.data.data.list;
      });
    },
  },
};
</script>
<style lang="scss">
.detail {
  width: 100%;
  height: 100vh;
  background: #f0f2f5;
  .detail-header {
    width: 100%;
    background: white;
    img {
      width: 100%;
      height: 15rem;
    }
  }
  .detail-content {
    background: white;
    font-size: 18px;
    color: #ccc;
    box-sizing: border-box;
    padding: 0px 8px;
  }
  .detail-teacher {
    background-color: white;
  }
  .van-grid-item__text {
    font-size: 18px;
  }
  .van-icon__image {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
  }
  .dv {
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
    margin: 10px 0;
    background-color: white;
  }
  .pingjia {
    margin-top: 10px;
    padding: 0 10px;
    background-color: white;
    .pjlist {
      height: 14vh;
      font-size: 3.73333vw;
      background-color: white;
      display: flex;
      align-items: center;
      // justify-content: space-around;
      img {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
      }
      .nr1 {
        .nrt {
          padding-left: 2.66667vw;
          align-items: center;
          display: flex;
        }
      }
    }
  }
}
.btm {
  height: 4rem;
}
</style>
